<template>
  <div class="permission">
    <el-card style="margin: 20px">
      <el-row type="flex" justify="end">
        <el-col :span="4">
          <el-button type="primary" size="small" @click="add(1, '0')">
            添加权限
          </el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-table :data="list" style="width: 100%" row-key="id" default-expand-all>
      <el-table-column prop="name" align="center" label="名称" width="200" />
      <el-table-column prop="code" align="center" label="标识" width="200" />
      <el-table-column
        prop="description"
        align="center"
        label="描述"
        width="280"
      />
      <el-table-column prop="address" align="center" label="操作">
        <template v-slot="{ row }">
          <el-button
            v-if="row.type === 1"
            size="small"
            type="success"
            @click="add(2, row.id)"
          >
            添加
          </el-button>
          <el-button size="small" type="primary" @click="getPermDetail(row.id)">
            编辑
          </el-button>
          <el-button size="small" type="danger" @click="delPerm(row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 操作弹层 -->
    <el-dialog
      :title="form.id ? '编辑' : '新增'"
      :visible="editShow"
      :before-close="close"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="form.code" />
        </el-form-item>
        <el-form-item label="权限描述" prop="description">
          <el-input v-model="form.description" />
        </el-form-item>
        <el-form-item label="开启" prop="enVisible">
          <el-switch
            v-model="form.enVisible"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-row type="flex" justify="center">
          <el-col :span="6">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="confirm"> 确 定 </el-button>
          </el-col>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { dataToTree } from '@/utils/validate'
import {
  getAllPerm,
  addPerm,
  getPermDetail,
  editPerm,
  delPerm
} from '@/api/permission'
export default {
  name: 'PermissionIndex',
  data() {
    const checkName = (rule, value, callback) => {
      if (this.form.id) {
        // 编辑
        const boo = this.originList
          .filter((key) => key.pid === this.id)
          .some((item) => item.name === value && item.id !== this.id)
        boo ? callback(new Error('名称重复')) : callback()
      } else {
        // 新增
        const boo = this.originList
          .filter((key) => key.pid === this.id)
          .some((item) => item.name === value)
        boo ? callback(new Error('名称重复')) : callback()
      }
    }
    const checkcode = (rule, value, callback) => {
      if (this.form.id) {
        // 编辑
        const boo = this.originList.some(
          (item) => item.name === value && item.id !== this.id
        )
        boo ? callback(new Error('名标识重复')) : callback()
      } else {
        // 新增
        const boo = this.originList.some((item) => item.name === value)
        boo ? callback(new Error('名标识重复')) : callback()
      }
    }
    return {
      id: '0',
      list: [], // 转换树形数据,
      originList: [], // 原始数据
      editShow: false,
      form: {
        name: '',
        code: '',
        description: '',
        enVisible: '',
        type: null,
        pid: '0'
      },
      rules: {
        name: [
          { required: true, message: '内容不能为空', trigger: 'blur' },
          { validator: checkName, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '内容不能为空', trigger: 'blur' },
          { validator: checkcode, trigger: 'blur' }
        ],
        description: [
          { required: true, message: '内容不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getAllPerm()
  },
  methods: {
    // 获取所有权限
    async getAllPerm() {
      const res = await getAllPerm()
      this.originList = res
      console.log(res)
      this.list = dataToTree(res, '0')
    },
    // 添加权限
    add(type, id) {
      this.editShow = true
      this.form.type = type
      this.form.pid = id
      this.id = id
    },
    // 关闭弹层
    close() {
      this.editShow = false
      this.$refs.form.resetFields()
      this.form = {
        name: '',
        code: '',
        description: '',
        enVisible: '',
        type: null
      }
    },
    confirm() {
      this.$refs.form.validate(async (isOk) => {
        if (isOk) {
          if (this.form.id) {
            // 编辑
            await editPerm(this.form)
            this.$message('更新权限成功')
          } else {
            // 新增
            await addPerm(this.form)
            this.$message('添加权限成功')
          }
          this.editShow = false
          this.getAllPerm()
        }
      })
    },
    // 编辑权限
    async getPermDetail(id) {
      const res = await getPermDetail(id)
      this.id = id
      this.form = res
      this.editShow = true
    },
    // 删除权限
    async delPerm(id) {
      try {
        await delPerm(id)
        this.$message('删除成功')
        this.getAllPerm()
      } catch (err) {
        this.$message('删除失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.permission {
  padding: 20px;
  font-size: 16px;
}
</style>
